<template>
  <el-menu :default-active="defaultItem" class="el-menu-demo m-nav" mode="horizontal"  @select="handleSelect">
    <!--<el-menu-item index="" class="nav-list">全部</el-menu-item>-->
    <el-menu-item  v-for="nav in parcel" :index.string="nav.nav_id" :key="nav.nav_id" class="nav-list" >{{nav.nav_name}}</el-menu-item>
  </el-menu>
</template>

<script>
    export default {
      name: "listNav",
      props:['parcel','keyName'],
      data(){
        return{
          current:''
          // parcel:[
          //   {
          //     "nav_id": "buyizhi",
          //     "nav_name": "金额不一致"
          //   },
          //   {
          //     "nav_id": "wucangci",
          //     "nav_name": "无场次"
          //   },
          //   {
          //     "nav_id": "yizhi",
          //     "nav_name": "金额一致"
          //   }
          // ]
        }
      },
      computed:{
        defaultItem(){
          this.current = '';
          return this.current;
        }
      },
      methods:{
        handleSelect(key){
          const opt = {}
          opt[this.keyName] = key;
          if(this.keyName == 'pay_type'){
            opt.state = '';
          }
          if(this.keyName == 'state'){
            opt.pay_type = '';
          }

          // 分页默认第一页
          opt.page = 1;
          this.$emit('upload',opt)
        }
      },
      mounted(){
        // console.log(this.parcel)
      }
    }
</script>

<style scoped lang="scss">
  .m-nav{
    margin:0 0 20px 0;
  }
  .el-menu--horizontal>.el-menu-item.is-active{
    border-bottom:4px solid #FFED8C;
  }
  .nav-list{
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #000000;
    letter-spacing: 0;
  }
</style>
